<style scoped>
    .el-table .disabled-row {
        background: oldlace;
    }
    .com_model_block .inp{
        width:220px;
    }
</style>
<div class="content" id="team" v-cloak>
    <el-row>
        <el-col :span="12">
            <div class="grid-content bg-purple com_title">资产管理</div>
        </el-col>
    </el-row>
    <div class="com_top">
        <el-select v-model="team_code" class="inp" @change="getList" placeholder="选择所属团队">
            <el-option v-for="item in teamlist" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-input v-model="assets_name" class="inp ml20" placeholder="按资产名称查询"></el-input>
        <el-button @click="getList" type="primary">搜索</el-button>
    </div>
    <!-- table -->
    <div class="com_table_block mt20">
        <div class="table_header">
            <div class="l">资产管理</div>
            <div class="r">
                <el-button type="primary" size="medium" class="ml20" icon="el-icon-plus" @click="handleAssets(1)">新增资产</el-button>
                <el-button type="danger" size="medium" icon="el-icon-s-tools" @click="serverConfigs()">脚本任务</el-button>
            </div>
        </div>
        <div class="table_body">
            <el-table :data="datalist" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="资产名称">
                </el-table-column>
                <el-table-column prop="code" label="资产编码" width="180">
                </el-table-column>
                <el-table-column label="所属团队">
                    <template slot-scope="scope">
                        <div>{{scope.row.teamlist[0]?scope.row.teamlist[0].name:''}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="outer_ip" label="外网IP" width="150">
                </el-table-column>
                <el-table-column prop="lan_ip" label="内网IP" width="150">
                </el-table-column>
                <el-table-column prop="user" label="账号" width="100">
                </el-table-column>
                <el-table-column prop="port" label="端口号" width="100">
                </el-table-column>
                <el-table-column prop="user_name" label="操作人" width="80">
                </el-table-column>
                <el-table-column label="可用状态" width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 1" class="success">已启用</div>
                        <div v-if="scope.row.status != 1" class="red">已禁用</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" fixed="right">
                    <template slot-scope="scope">
                        <div class="mb10">
                            <el-button type="primary" size="small" @click="goToConsole(scope.row)">控制台</el-button>
                            <el-button type="success" size="small" @click="serverConfigs(scope.row)">脚本任务</el-button>
                            <el-button v-if="scope.row.status==1?true:false" @click="hanleUse(scope.row)" type="danger"
                                size="small" plain>禁用</el-button>
                            <el-button v-if="scope.row.status==0?true:false" @click="hanleUse(scope.row)" type="success"
                                size="small">启用</el-button>
                        </div>
                        <div>
                            <el-button @click="handleAssets(2,scope.row)" type="primary" size="small" plain>编辑</el-button>
                            <el-button @click="hanleDelete(scope.row)" type="danger" size="small">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="common_pages">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
    </div>
    <!-- model弹出框 -->
    <el-dialog width="50%" title="资产编辑" :visible.sync="dialogTableVisible">
        <div class="com_model_main">
            <div class="mb20 light" v-if="team.type==2?true:false">
                <i class="el-icon-warning fs-16 mr5 primary"></i>
                更改了资产配置项后，所有相关应用需要手动更新分配资产按钮，以达到资产数据的同步更新!
            </div>
            <el-row>
                <el-col :span="12">
                    <div class="com_model_block">
                        <div class="left">所属团队<span class="red">*</span></div>
                        <el-select class="inp" v-model="team.team_code" placeholder="请选择">
                            <el-option v-for="item in teamlist" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="com_model_block ml20">
                        <div class="left">资产名称<span class="red">*</span></div>
                        <el-input class="inp" v-model="team.name" placeholder="请输资产名称"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="com_model_block">
                        <div class="left">资产编码<span class="red">*</span></div>
                        <el-input class="inp" v-model="team.code" placeholder="以ass_开头、例如ass_zxhy" :disabled="team.type==2?true:false"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="com_model_block ml20">
                        <div class="left">外网IP<span class="red">*</span></div>
                        <el-input class="inp" v-model="team.outer_ip" placeholder="请输入外网IP"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="com_model_block">
                        <div class="left">内网IP<span class="red">*</span></div>
                        <el-input class="inp" v-model="team.lan_ip" placeholder="请输入内容IP"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="com_model_block ml20">
                        <div class="left">登录用户名<span class="red">*</span></div>
                        <el-input class="inp" v-model="team.user" placeholder="请输入登录用户名"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="com_model_block">
                        <div class="left">登录端口号<span class="red">*</span></div>
                        <el-input class="inp" v-model="team.port" placeholder="请输入登录端口号"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="com_model_block ml20">
                        <div class="left">登录密码<span class="red">*</span></div>
                        <el-input class="inp" v-model="team.password" placeholder="请输入登录密码"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="com_model_block">
                        <div class="left">启用状态</div>
                        <el-switch v-model="team.status" active-color="#409EFF"></el-switch>
                    </div>
                </el-col>
            </el-row>
            <div class="btns">
                <el-button type="primary" @click="submitAssets"> 提交 </el-button>
            </div>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({
        el: '#team',
        data: function () {
            return {
                team_code:'',
                assets_name:'',
                teamlist:[],
                datalist: [],
                pageSize: 30,
                totalCount: 0,
                currentPage: 1,
                dialogTableVisible: false,
                type: 1,
                team: {
                    team_code:'',
                    type: 1,
                    _id: '',
                    name: '',
                    code: '',
                    outer_ip:'',
                    lan_ip:'',
                    user:'',
                    port:'',
                    password:'',
                    status: true,
                },
                multipleSelection:[],
            }
        },
        filters: {
        },
        mounted() {
            this.getList();
            this.getTeamList();
        },
        methods: {
            getList() {
                util.ajax({
                    type: 'get',
                    url: `${config.baseApi}api/v1/assets/list`,
                    data: {
                        team_code: this.team_code,
                        assets_name: this.assets_name,
                        pageNo: this.currentPage,
                        pageSize: this.pageSize,
                    },
                    success: data => {
                        this.totalCount = data.data.totalNum;
                        this.datalist = data.data.datalist;
                    }
                })
            },
            getTeamList() {
                util.ajax({
                    type: 'get',
                    url: `${config.baseApi}api/v1/team/list`,
                    data: {
                        pageNo: 1,
                        pageSize: 100,
                    },
                    success: data => {
                        const datas = data.data.datalist || [];
                        const options = [];
                        datas.forEach(item => {
                            options.push({
                                value: item.code,
                                label: item.name
                            })
                        })
                        this.teamlist = options;
                    }
                })
            },
            submitAssets() {
                if (!this.team.team_code) {
                    popup.alert({ title: '请选择所属团队!' });
                    return;
                }
                if (!this.team.name) {
                    popup.alert({ title: '请填写资产名称!' });
                    return;
                }
                if (!this.team.code) {
                    popup.alert({ title: '请填写资产编码!' });
                    return;
                }
                if (!this.team.outer_ip) {
                    popup.alert({ title: '请填写外网IP地址!' });
                    return;
                }
                if (!this.team.lan_ip) {
                    popup.alert({ title: '请填写内网IP地址!' });
                    return;
                }
                if (!this.team.user) {
                    popup.alert({ title: '请填写登录用户名!' });
                    return;
                }
                if (!this.team.password) {
                    popup.alert({ title: '请填写登录用密码!' });
                    return;
                }
                this.team.status = this.team.status ? 1 : 0;
                const userMsg = util.getStorage('local', 'userMsg');
                this.team.user_name = userMsg ? JSON.parse(userMsg).user_name : '';
                util.ajax({
                    url: `${config.baseApi}api/v1/assets/handle`,
                    data: this.team,
                    success: data => {
                        this.dialogTableVisible = false;
                        this.getList();
                        popup.miss({ title: '操作成功!' });
                    }
                })
            },
            handleAssets(type, item) {
                if(item) item = JSON.parse(JSON.stringify(item));
                if (item) {
                    this.team = item;
                    this.team.status = item.status == 1 ? true : false;
                } else {
                    this.team = {
                        team_code: '',
                        type: 1,
                        _id: '',
                        name: '',
                        code: 'ass_' + util.randomString(12),
                        outer_ip: '',
                        lan_ip: '',
                        user: '',
                        port: '',
                        password: '',
                        status: true,
                    }
                }
                this.team.type = type;
                this.dialogTableVisible = true;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList();
            },
            hanleUse(item) {
                let str = item.status == 1 ? '禁用' : '启用';
                popup.confirm({
                    title: `确定${str}${item.name}资产吗？`, yes: () => {
                        util.ajax({
                            url: `${config.baseApi}api/v1/assets/setStatus`,
                            data: {
                                _id: item._id,
                                status: item.status == 1 ? 0 : 1,
                            },
                            success: data => {
                                item.status = item.status == 1 ? 0 : 1,
                                    popup.miss({ title: '操作成功!' });
                            }
                        })
                    }
                })
            },
            hanleDelete(item) {
                popup.confirm({
                    title: `确定删除${item.name}资产吗？`, yes: () => {
                        util.ajax({
                            url: `${config.baseApi}api/v1/assets/delete`,
                            data: {
                                _id: item._id,
                            },
                            success: data => {
                                this.getList();
                                popup.miss({ title: '操作成功!' });
                            }
                        })
                    }
                })
            },
            tableRowClassName({ row, rowIndex }) {
                if (row.status != 1) {
                    return 'disabled-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            serverConfigs(item) {
                if(!item && !this.multipleSelection.length){
                    popup.alert({title:'请选择需要配置的资产!'})
                    return;
                }
                const assestsList = item ? [item] : this.multipleSelection;
                util.setStorage('session','assets_list_configs',JSON.stringify(assestsList));
                location.href = "/assetsconfig";
            },
            goToConsole(assetsItem){
                window.open("/console?ids=" + assetsItem._id)
            },
        },
    })
</script>